MIT App Inventor 設計
使用 MIT App Inventor 搭建記帳 App 的 UI 介面，包含下拉式類別選單（類別）、明細輸入框、金額欄位，以及「儲存」與「清空」按鈕。後端使用
微型資料庫（TinyDB）實現本地持久化，Blocks 邏輯中以 Screen1.Initialize 事件讀取歷史資料，確保重開 App 後資料不丟失。
VS Code · FastAPI · PWA
▸ 後端架構
以 FastAPI 建立 REST API，搭配 uvicorn 作為 ASGI 伺服器。靜態路徑使用 StaticFiles 掛載，解決 404 Not Found 的路徑錯誤。
▸ PWA 離線快取
前端透過 Service Worker (sw.js) 攔截 fetch 請求，將靜態資源寫入 Cache Storage，實現類原生 App 的離線瀏覽體驗。
最終介面成果
▸ UI 設計亮點
focus 屬性實現輸入框亮橙色邊框技術架構總覽
| 層次 | 技術 | 用途 |
|---|---|---|
| Frontend | HTML / CSS / JavaScript | 記帳表單 · 歷史清單 · PWA 殼層 |
| PWA | Service Worker + manifest.json | 離線快取 · 可安裝至主畫面 |
| Backend | FastAPI + Uvicorn | REST API · 靜態資源服務 |
| Database | Firebase Realtime DB | 雲端即時同步記帳資料 |
| Mobile | MIT App Inventor + TinyDB | Android 原生 App · 本地持久化 |
🖋 學習心得
今天課程的核心，是讓我們將前後端技術融合，並賦予網頁端 App 接近原生應用的體驗。在 VS Code 中用 FastAPI 搭建後端、連接 Firebase Realtime Database，再到前端配合 Service Worker 實現離線快取，這一整套流程讓我真正體會到了全端開發的魅力。
作為 IT 學生，我常常覺得寫程式有時很枯燥，但今天看到自己敲下的每一行 Python 和 JavaScript 程式碼，最終變成了一個擁有古典皮革手帳風格、帶有一點賽博朋克金黑配色的精美介面，這種成就感是無法言喻的。
尤其是當我們成功解決 404 Not Found 的靜態路徑錯誤，並利用 CSS 的 focus 屬性實現了輸入框那抹驚豔的亮橙色邊框時，我深刻意識到：
技術不僅僅是邏輯，更是藝術與細節的結合。
這次編寫記帳 App 的經歷，也讓我對未來的技術道路有了更多信心。在異地求學雖然充滿挑戰，有時在趕完專案程式碼的深夜裡也會感到一絲孤獨，但只要看到終端機成功跑出
200 OK，看到自己親手設計的系統能夠流暢運行，所有的疲憊就煙消雲散了。
「代碼不會說謊，你投入多少精力，它就給你多少回饋。」
今天的課不僅是一次技術上的提升，更點燃了我作為一名未來程式設計師的創作熱情。我期待著未來能用所學的程式技術，去創造更多既實用又充滿美感的東西。
阮文孟
· 1111310035